<template>
  <!-- 投标详情 -->
  <div class="biddingDetail">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="投标详情" style="margin-bottom: 20px">
          </el-page-header>
        </div>
        <div class="buttons">
          <el-link type="primary" @click="active">选择</el-link>
          <el-select
              v-model="region"
              placeholder="请选择"
              size="mini"
              style="margin:0 10px">
            <el-option label="中标" value="1"></el-option>
            <el-option label="落选" value="0"></el-option>
          </el-select>
          <el-button @click="toggleSelection()" size="mini">取消选择</el-button>
          <el-button type="success"  size="mini" @click="updateBidding()">确定</el-button>
        </div>
      </div>

      <el-table
          ref="multipleTable"
          :data="biddingTable"
          style="width: 100%"
          highlight-current-row
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
      >
        <el-table-column
            type="selection"
            width="55"
            v-if="isActive"
            :reserve-selection="true"
            >
        </el-table-column>
        <el-table-column
            label="序号"
            type="index"
            :index="indexMethod">
        </el-table-column>
        <el-table-column
            prop="user.userName"
            label="投标人"
        >
        </el-table-column>
        <el-table-column
            prop="user.userPhone"
            label="电话号码"
        >
        </el-table-column>
        <el-table-column
            prop="biddingPrice"
            label="投标价格"
        >
        </el-table-column>

        <el-table-column
            prop="biddingTime"
            label="投标时间"
            sortable>
          <template slot-scope="scope">
            {{shortTime(scope.row.biddingTime)}}
          </template>
        </el-table-column>

        <el-table-column
            prop="biddingStatus"
            label="投标状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.biddingStatus == 2"><el-tag type="info" size="small" color="">待处理</el-tag></span>
            <span v-else-if="scope.row.biddingStatus == 1"><el-tag type="success" size="small" color="">中标</el-tag></span>
            <span v-else><el-tag type="danger" size="small" color="">落选</el-tag></span>
          </template>
        </el-table-column>

      </el-table>


      <div style="padding: 10px 0">
        <el-pagination
            :page-sizes="[2, 5, 10, 20]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total
            :current-page=this.pageNum
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </el-card>
  </div>
</template>

<script>
import {shortTime} from "@/utils/timeFormat";
import {getBiddingByTenderIdPage, updateFailBidding, updateWinBidding} from "@/api/allApi";
import {useUser} from "@/store/userStore"
export default {
  data(){
    return {
      biddingTable:[],
      pageSize:5,
      total:0,
      pageNum:1,
      isActive:false,
      region:'',
      User:useUser(),
      multipleSelection: []
    }
  },
  methods:{
    goBack() {
      this.$router.back();
    },
    shortTime,
    indexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.pageNum // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getBiddingByTenderIdPage();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.getBiddingByTenderIdPage();
    },
    getBiddingByTenderIdPage(){
      getBiddingByTenderIdPage({
        current:this.pageNum,
        pageSize:this.pageSize,
        tenderId:this.$route.params.tenderId
      }).then(res=>{
        this.biddingTable = res.data.data
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    active() {
      this.User.changeActive()
      this.isActive = this.User.isActive
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(v => v.biddingId)
    },
    getRowKeys(row) {
      return row.biddingId;
    },
    updateBidding(){
      if (this.region == ''){
        this.$message.error("请选择中标或者落选!")
        return
      }
      if (this.region == '1'){
        this.winBidding()
      }else if (this.region == '0'){
        this.failBidding()
      }
    },
    winBidding(){
      if (!this.multipleSelection.length){
        this.$message.error("请选择数据！")
        return
      }
      this.$confirm('确定选中为中标吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            //批量中标
            updateWinBidding(
              this.multipleSelection
            ).then(res => {
              this.$message.success(res.data.data)
              //重新加载页面的方法
              this.getBiddingByTenderIdPage()
            }).catch(() => {
              console.log('error submit')
            })
          }
        }
      })
    },
    failBidding(){
      if (!this.multipleSelection.length){
        this.$message.error("请选择数据！")
        return
      }
      this.$confirm('确定选中为落选吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: action => {
          if (action === 'confirm') {
            //批量落选
            updateFailBidding(
                this.multipleSelection
            ).then(res => {
              this.$message.success(res.data.data)
              //重新加载页面的方法
              this.getBiddingByTenderIdPage()
            }).catch(() => {
              console.log('error submit')
            })
          }
        }
      })
    },
  },
  mounted() {
    this.getBiddingByTenderIdPage()
  }
}
</script>

<style lang="less" scoped>
  .header {
    display: flex;
    justify-content: space-between;
  }

  .page-header {
    width: 20%;
  }

  .buttons {
    margin: 0px 0 10px 0;
  }
</style>